<template>
  <div class="map-content">
    <BaseLeafletMap>
      <DarkPointMonitoring v-if="componentsVisible.Sbt"></DarkPointMonitoring>
      <GridPointMonitoring v-if="componentsVisible.gdz"></GridPointMonitoring>
      <LevelGridPointMonitoring
        v-if="componentsVisible.fsgdz"
      ></LevelGridPointMonitoring>
      <CityName
        v-if="componentsVisible.xm"
        :labels="componentsVisible.labels"
      ></CityName>
      <CountyName
        v-if="baseLeafletMapStore.selectCity"
        :selectCity="baseLeafletMapStore.selectCity"
      ></CountyName>
      <MapLoad />
    </BaseLeafletMap>
    <TimeLine />
    <StationDialog />
  </div>
</template>

<script setup lang="ts">
import { usePredictionStore } from '@/pages/conventional-fine-forecasting/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
import CityName from '@/layouts/cityName/index.vue'
import CountyName from '@/layouts/countyName/index.vue'
import GridPointMonitoring from '@/pages/conventional-fine-forecasting/components/map-components/GridPointMonitoring/index.vue'
import LevelGridPointMonitoring from '@/pages/conventional-fine-forecasting/components/map-components/levelGridPointMonitoring/index.vue'
import DarkPointMonitoring from '@/pages/conventional-fine-forecasting/components/map-components/darkPointMonitoring/index.vue'
import StationDialog from '@/pages/conventional-fine-forecasting/components/station-dialog.vue'
import MapLoad from './map-load.vue'
import TimeLine from '@/pages/conventional-fine-forecasting/components/time-line.vue'

const predictionStore = usePredictionStore()
const baseLeafletMapStore = useBaseLeafletMapStore()
const componentsVisible = computed(() => predictionStore.componentsVisible)
//网格预报点击地图经纬度
let clickLatlng = ref({ lat: '', lng: '' })
provide('clickLatlng', clickLatlng)
onMounted(() => {
  predictionStore.handleGetStationInfo()
  predictionStore.handleGetGridPointMonitoringLegendData()
  predictionStore.gdskjcCurrentActive = 'RAIN'
})

onUnmounted(() => {})
</script>

<style scoped lang="scss">
.map-content {
  width: 100%;
  height: 100%;
}
</style>
